React Bootstrap — Checkbox and Radio Buttons

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to work with React Bootstrap buttons.

Checkbox and Radio Buttons

We can use the ToggleButton component to make the buttons work as a checkbox or a radio button style.

For example, we can write:

import React from "react";
import ToggleButton from "react-bootstrap/ToggleButton";
import ButtonGroup from "react-bootstrap/ButtonGroup";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  const [checked, setChecked] = React.useState(false);
  const [radioValue, setRadioValue] = React.useState("foo");

  const radios = [
    { name: "Foo", value: "foo" },
    { name: "Bar", value: "bar" },
    { name: "Baz", value: "baz" }
  ];

  return (
    <>
      <ButtonGroup toggle className="mb-2">
        <ToggleButton
          type="checkbox"
          checked={checked}
          value="1"
          onChange={e => setChecked(e.currentTarget.checked)}
        >
          Checkbox
        </ToggleButton>
      </ButtonGroup>
      <br />
      <ButtonGroup toggle>
        {radios.map((radio, index) => (
          <ToggleButton
            key={index}
            type="radio"
            name="radio"
            value={radio.value}
            checked={radioValue === radio.value}
            onChange={e => setRadioValue(e.currentTarget.value)}
          >
            {radio.name}
          </ToggleButton>
        ))}
      </ButtonGroup>
    </>
  );
}

to create checkbox and radio buttons.

The first ButtonGroup has the checkbox.

We need the toggle prop for the group so that we get the checkbox effect.

The ToggleButton has the type prop set to 'checkbox' .

The value is set to 1.

And the onChange prop is required to set the checked value to the checkbox’s value .

In the 2nd ButtonGroup we have several buttons.

They’re all ToggleButton s with the type set to 'radio' .

This makes them radio buttons.

The value is the value that we set,

checked has the checked value of the radio button.

And the onChange prop lets us update the value of radioValue according to the value prop.

Now when we click on the Checkbox button, it’ll toggle the button state.

And when we click on the buttons on the 2nd row, we’ll see the only the one we clicked on checked.

Uncontrolled Button Groups

We can also make ToggleButton uncontrolled.

For instance, we can write:

import React from "react";
import ToggleButton from "react-bootstrap/ToggleButton";
import ToggleButtonGroup from "react-bootstrap/ToggleButtonGroup";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <ToggleButtonGroup type="checkbox" defaultValue={[1, 3]} className="mb-2">
        <ToggleButton value={1}>foo</ToggleButton>
        <ToggleButton value={2}>bar</ToggleButton>
        <ToggleButton value={3}>baz</ToggleButton>
      </ToggleButtonGroup>
      <br />
      <ToggleButtonGroup type="radio" name="options" defaultValue={1}>
        <ToggleButton value={1}>foo</ToggleButton>
        <ToggleButton value={2}>bar</ToggleButton>
        <ToggleButton value={3}>baz</ToggleButton>
      </ToggleButtonGroup>
    </>
  );
}

We use the ToggleButtonGroup instead of ButtonGroup to add uncontrolled ToggleButton s inside.

We set the type to 'checkbox' for checkboxes and 'radio' for radio buttons.

defaultValue has the default value.

Checkboxes can have multiple default values.

And radio buttons can have one.

They should match the values we have in the value prop.

Now we’ll see checkboxes and radio buttons but there won’t be any states associated with them.

Controlled Button Groups

We can also make the buttons groups controlled components.

For instance, we can write:

import React from "react";
import ToggleButton from "react-bootstrap/ToggleButton";
import ToggleButtonGroup from "react-bootstrap/ToggleButtonGroup";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  const [value, setValue] = React.useState([1, 3]);

  const handleChange = val => setValue(val);

  return (
    <ToggleButtonGroup type="checkbox" value={value} onChange={handleChange}>
      <ToggleButton value={1}>foo</ToggleButton>
      <ToggleButton value={2}>bar</ToggleButton>
      <ToggleButton value={3}>baz</ToggleButton>
    </ToggleButtonGroup>
  );
}

We have the ToggleButtonGroup again.

But now we have a value prop set to the value state.

onChange lets us set the value state when we click on the button.

value on the ToggleButton is the value that’ll be added.

handleChange has all the checked values so that we can set it.

We can do use the same code for a radio button:

import React from "react";
import ToggleButton from "react-bootstrap/ToggleButton";
import ToggleButtonGroup from "react-bootstrap/ToggleButtonGroup";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  const [value, setValue] = React.useState(2);

  const handleChange = val => setValue(val);

  return (
    <ToggleButtonGroup
      name="value"
      type="radio"
      value={value}
      onChange={handleChange}
    >
      <ToggleButton value={1}>foo</ToggleButton>
      <ToggleButton value={2}>bar</ToggleButton>
      <ToggleButton value={3}>baz</ToggleButton>
    </ToggleButtonGroup>
  );
}

We have the name prop to set the name.

type is changed to 'radio' for the radio button.

We set the value the same way with handleChange .

The only difference is that there’s only one value instead of an array.

Conclusion

We can add toggle buttons to add buttons as checkbox and radio button styles.

They can be controlled or uncontrolled.

If it’s controlled, then we set the state.